<template>
  <div class="wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}">
      <span>店铺详情</span>
    </x-header>
    <div class="loginBox main">
      <div class="logoBox">
        <img class="logoImg" :src="shopInfo.logo" />
      </div>
      <div class="shopname">
        <label>店铺名称:</label>
        <span>{{shopInfo.name}}</span>
      </div>

      <div class="connect">
        <div class="item">
          <div class="user">
            <label>联系人:</label>
            <span>{{shopInfo.contactName}}</span>
          </div>
          <div
            style="display: flex;flex-direction: row;align-items: flex-start;justify-content: left;"
          >
            <label>联系电话:</label>
            <span style="margin-left: .45rem;">{{shopInfo.servicePhone}}</span>
            <span @click="callPhone(shopInfo.servicePhone)">
              <img
                style="width:.4rem;height: .4rem;margin-left: .24rem;"
                src="./../../../assets/img/customer/phone.png"
              />
            </span>
          </div>
        </div>
      </div>

      <div
        class="connect"
        v-if="shopInfo.distributorContactVOSs && shopInfo.distributorContactVOSs.length>0"
      >
        <div class="item" v-for="(person,index) in shopInfo.distributorContactVOSs" :key="index">
          <div class="user">
            <label>联系人:</label>
            <span>{{person.contactName}}</span>
          </div>
          <div
            style="display: flex;flex-direction: row;align-items: flex-start;justify-content: left;"
          >
            <label>联系电话:</label>
            <span style="margin-left: .45rem;">{{person.phone}}</span>
            <span @click="callPhone(person.phone)">
              <img
                style="width:.4rem;height: .4rem;margin-left: .24rem;"
                src="./../../../assets/img/customer/phone.png"
              />
            </span>
          </div>
        </div>
      </div>

      <!--<div class="connect" v-if="shopInfo.distributorContactVOSs.length==0">-->
      <!--<div class="item">-->
      <!--<div class="user">-->
      <!--<label>联系人:</label>-->
      <!--<span>{{shopInfo.contactName}}</span>-->
      <!--</div>-->
      <!--<div style="display: flex;flex-direction: row;align-items: center;">-->
      <!--<label>联系电话:</label>-->
      <!--<span>{{shopInfo.phone}}</span>-->
      <!--<img style="width:.4rem;height: .4rem;margin-left: .14rem;" src="./../../../assets/img/customer/phone.png"/>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->

      <div class="shopInfo">
        <div class="jianjie">
          <label>店铺简介:</label>
          <div class="value">
            <div>{{shopInfo.introduction}}</div>
          </div>
        </div>
        <div class="gonggao">
          <label>店铺公告:</label>
          <!--<span>{{shopInfo.notice}}</span>-->
          <div class="value">
            <div>{{shopInfo.notice}}</div>
          </div>
        </div>
        <template v-if="shopInfo.erpStatus==1">
          <div class="gonggao">
            <label>微信:</label>
            <!--<span>{{shopInfo.notice}}</span>-->
            <div class="value">
              <div>{{shopInfo.weixin}}</div>
            </div>
          </div>
          <div class="gonggao">
            <label>QQ:</label>
            <!--<span>{{shopInfo.notice}}</span>-->
            <div class="value">
              <div>{{shopInfo.qq}}</div>
            </div>
          </div>
          <div class="gonggao">
            <label>店铺图片:</label>
            <!--<span>{{shopInfo.notice}}</span>-->
            <div class="value imgBox">
              <img v-for="(item,i) in shopInfo.images" :key="i" :src="item" alt @click="$refs.previewer.show(i)"/>
            </div>
            <previewer ref="previewer" :list="previewerList"></previewer>
          </div>
        </template>
      </div>

      <!--    <div class="set">-->
      <!--        <group>-->
      <!--          <x-switch title="隐藏价格" v-model="hidePrice"></x-switch>-->
      <!--          <x-switch title="隐藏商品" v-model="hideGood"></x-switch>-->
      <!--        </group>-->
      <!--    </div>-->
      <!--    <div class="loginForm">-->
      <!--      <group>-->
      <!--        <x-input-->
      <!--                 title="<span style='color:red;'>*</span>店铺名称:"-->
      <!--                 v-model.trim="shopName"-->
      <!--                 name="phone"-->
      <!--                 :max="20"-->
      <!--        >-->
      <!--        </x-input>-->
      <!--      </group>-->

      <!--      <group>-->
      <!--        <x-input-->
      <!--                 title="<span style='color:red;'>*</span>联系人:"-->
      <!--                 v-model.trim="name"-->
      <!--                 name="name"-->
      <!--                 :max="8"-->
      <!--                 class="weui-vcode">-->
      <!--        </x-input>-->

      <!--      </group>-->

      <!--      <group>-->
      <!--        <x-input-->
      <!--          :disabled="true"-->
      <!--          title="<span style='color:red;'>*</span>联系电话:"-->
      <!--          v-model.trim="phone"-->
      <!--          name="phone">-->
      <!--        </x-input>-->
      <!--      </group>-->

      <!--    </div>-->
      <!--    <div  v-if="showBtn"  class="login" @click="login" :class="!shopName||!name||!phone||shopName.length>20||name.length>8?'disable-btn':''">确认</div>-->
    </div>
  </div>
</template>
<!--<script src="./login.js"></script>-->
<script>
import { XSwitch } from "vux";
export default {
  name: "login",
  components: {
    XSwitch
  },
  data() {
    return {
      shopInfo: {},
      hidePrice: false,
      hideGood: false,
      shopName: "",
      name: "",
      phone: "",
      logo: "https://qiniu.dpzaixian.com/img/corelib_home_shop_default.png",
      showBtn: true,
      docmHeight: document.documentElement.clientHeight //初始屏幕高度
    };
  },
  computed: {
    previewerList(){
      if(!this.shopInfo.images) return [];
      return this.shopInfo.images.map(item=>{
        return {
          src: item
        }
      })
    }
  },
  methods: {
    callPhone(phone) {
      if (this.$fromApp(this)) {
        this.$callJava({ code: 1001, phone: phone });
      } else {
        window.location.href = "tel:" + phone;
      }
    }
  },
  created: function() {
    this.shopId = this.$route.query.shopId;
    let that = this;
    // if (!this.$fromApp(this)) {
    //获取用户信息，判断是否完善信息
    // this.$ajax.get(
    //   "common/distributor/info",
    //   res2 => {
    //     if (res2.code == "200") {
    //       this.shopInfo = res2.data;
    //     }
    //   },
    //   { distributorId: this.shopId }
    // );
    this.$ajax.get(
      "shop/info",
      res => {
        if (res.code == 200) {
          that.shopInfo = res.data;
          if (that.shopInfo.erpStatus == 1) {
            let contactList = that.shopInfo.contactAll.split(";");
            that.shopInfo.distributorContactVOSs = contactList.map(item => {
              let [name, mobile] = item.split(",");
              return {
                contactName: name,
                phone: mobile
              };
            });
            that.shopInfo.images = that.shopInfo.img.split(",");
          }
          // that.phone = res.data.account
          // that.shopName=res.data.name
          // that.name=res.data.contactName
        }
      },
      { sellerId: this.shopId }
    );
    // }
  },
  mounted: function() {
    console.log("mounted");
    window.onresize = () => {
      if (document.body.clientHeight < this.docmHeight) {
        this.showBtn = false;
        if (
          document.activeElement.tagName == "INPUT" ||
          document.activeElement.tagName == "TEXTAREA"
        ) {
          setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
          }, 100);
        }
      } else {
        this.showBtn = true;
      }
    };
  }
};
</script>
<style lang="less" scoped>
/*@import "./login.less";*/
.flex-row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.disable-btn {
  opacity: 0.5;
}

.loginBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
  /*padding: 0rem .4rem;*/

  .set {
    /deep/ .weui-cell:before {
      border-top: 0px solid #d9d9d9;
    }
    /deep/ .weui-label {
      /*margin-left: .4rem;*/
      font-size: 0.32rem;
      color: #333;
    }
    /deep/ .weui-cell_switch {
      padding-left: 0.8rem;
      padding-right: 0.8rem;
    }
    /deep/ .weui-switch:after,
    .weui-switch-cp__box:after {
      width: 0.6rem;
      height: 0.6rem;
    }
    /deep/ .weui-switch:checked:after,
    .weui-switch-cp__input:checked ~ .weui-switch-cp__box:after {
      -webkit-transform: translateX(15px);
      transform: translateX(15px);
    }
    /deep/ .weui-switch:before,
    .weui-switch-cp__box:before {
      background-color: #eaeaea;
      width: 1.04rem;
      height: 0.64rem;
    }
    /deep/ .weui-switch,
    .weui-switch-cp__box {
      width: 1rem;
      height: 0.6rem;
    }
    /deep/ .weui-switch:checked,
    .weui-switch-cp__input:checked ~ .weui-switch-cp__box {
      border-color: #4ac1a1;
      background-color: #4ac1a1;
    }
  }
  .shopInfo {
    background-color: #fff;
    margin-top: 0.2rem;
    .gonggao {
      display: flex;
      flex-direction: row;
      /*margin-bottom: .2rem;*/
      margin: 0.2rem 0;
      .value {
        margin-left: 0.4rem;
      }
    }
    .jianjie {
      display: flex;
      flex-direction: row;
      margin: 0.2rem 0;
      .value {
        margin-left: 0.4rem;
        color: #666666;
        font-size: 0.3rem;
        .url {
          color: #bbb;
        }
      }
    }
  }

  .connect {
    background-color: #fff;
    margin-top: 0.2rem;
    .item {
      margin: 0.2rem 0;
      .connect {
        margin-bottom: 0.1rem;
      }
    }
  }
  .shopname {
    background-color: #fff;
    padding-top: 0.4rem;
    padding-bottom: 0.2rem;
  }

  label {
    margin-left: 0.3rem;
    color: #333333;
    font-size: 0.3rem;
    font-weight: bold;
    width: 1.55rem;
    min-width: 1.55rem;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
  }
  span {
    color: #666666;
    font-size: 0.3rem;
    margin-left: 0.4rem;
  }
  .logoBox {
    text-align: center;
    background-color: #fff;

    .logoImg {
      margin-top: 0.6rem;
      display: inline-block;
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 50%;
    }

    div {
      margin-top: 0.25rem;
      color: #8e919f;
      font-size: 0.28rem;
    }
  }

  .loginForm {
    margin-top: 2rem;
    padding-right: 0.4rem;
    padding-left: 0.4rem;

    /deep/ .weui-cells {
      margin-top: 0;
      font-size: 0.32rem;
      line-height: 0px;

      .weui-cell {
        padding: 0.3rem 0rem;
      }

      .weui-input {
        color: #333;
        font-size: 0.3rem;
      }
    }

    /deep/ .weui-cells:before {
      display: none;
    }

    /deep/ .weui-cells:after {
      border-bottom: 1px solid rgba(235, 235, 235, 1);
    }

    /deep/ .weui-label {
      width: 1.55rem !important;
      display: inline-block;
      text-align: justify;
      text-align-last: justify;
      margin-right: 0.65rem;
      font-size: 0.32rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }

    /deep/ .weui-label:after {
      width: 100%;
      display: inline-block;
      content: "";
    }

    /deep/ input::-webkit-input-placeholder {
      color: #ddd;
      font-size: 0.32rem;
    }

    /deep/ input:-moz-placeholder {
      color: #ddd;
      font-size: 0.3rem;
    }

    /deep/ input:-ms-input-placeholder {
      color: #ddd;
      font-size: 0.3rem;
    }

    /deep/ .weui-btn {
      /*border: 0px;*/
      color: rgba(253, 179, 118, 1);
      padding: 0px;
      font-size: 0.26rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      border: none;
      background-color: transparent;
      outline: none;
    }

    /deep/ .weui-btn:after {
      border: none;
    }
  }

  .login {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: #527dd9;
    box-shadow: 0rem 0.18rem 0.35rem 0rem rgba(82, 125, 217, 0.15);
    padding: 0.3rem 0px;
    text-align: center;
    font-size: 0.34rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
}
.imgBox {
  display: flex;
  flex-wrap: wrap;
  img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.15rem;
    margin-bottom: .15rem;
    flex-shrink: 0;
  }
}
</style>

